<template>
  <div>
    <div>props的子组件 - {{ count }}</div>
    <button @click="handleClick">btn</button>
  </div>
</template>

<script setup>
// import {ref} from "vue"

// setup属性的情况下，直接defineProps函数调用就可以了
// const props = defineProps(["count"]);
// defineProps也可以传入一个对象
defineProps({
  count: Number,
  name: {
    type: String,
    default: "jerry",
  },
});

// defineEmits用来接受自定义事件
// const emit = defineEmits(["abc"]);
// defineEmits里面也可以接受对象，接受对象可以去校验函数传递的参数
const emit = defineEmits({
  abc(payload) {
    return payload > 10;
  },
});
const handleClick = () => {
  emit("abc", 1);
};

// const num = ref(props.count);
</script>

<!-- <script>
export default {
  // props也是不能写在setup的里面的
  props: ["count", "name"],
  // setup有两个参数
  setup(props, context) {
    const handleClick = () => {
      context.emit("abc");
    };

    return {
      handleClick,
    };
  },
};
</script> -->
